<template>
  <div>
    <DynamicTable
      row-key="id"
      header-title="部门管理"
      :data-request="Api.systemDept.deptList"
      :columns="columns"
      bordered
      size="small"
    >
      <template #afterHeaderTitle>
        <div class="flex gap-2 ml-2">
          <a-button @click="dynamicTableInstance.expandAll">展开全部</a-button>
          <a-button @click="dynamicTableInstance.collapseAll"
            >折叠全部</a-button
          >
        </div>
      </template>
      <template #toolbar>
        <a-button
          type="primary"
          :disabled="!$auth('system:dept:create')"
          @click="openMenuModal({})"
        >
          新增
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script lang="ts" setup>
import {
  baseColumns,
  type TableListItem,
  type TableColumnItem,
} from './columns';
import { roleSchemas } from './formSchemas';
import { useTable } from '@/components/core/dynamic-table';
import { useFormModal } from '@/hooks/useModal/';
import Api from '@/api/';

defineOptions({
  name: 'SystemDept',
});

const [DynamicTable, dynamicTableInstance] = useTable();

const [showModal] = useFormModal();

/**
 * @description 打开新增/编辑弹窗
 */
const openMenuModal = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `${record.id ? '编辑' : '新增'}部门`,
      width: '50%',
      onFinish: async values => {
        console.log('新增/编辑部门', values);
        if (record.id || record.id === 0) {
          await Api.systemDept.deptUpdate({ id: record.id }, values);
        } else {
          await Api.systemDept.deptCreate(values);
        }

        dynamicTableInstance?.reload();
      },
    },
    formProps: {
      labelWidth: 100,
      schemas: roleSchemas,
    },
  });
  formRef?.setFieldsValue({
    ...record,
    parentId: record.parent?.id,
  });
};
const delRowConfirm = async (record: TableListItem) => {
  await Api.systemDept.deptDelete({ id: record.id });
  dynamicTableInstance?.reload();
};

const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    width: 130,
    dataIndex: 'ACTION',
    hideInSearch: true,
    fixed: 'right',
    actions: ({ record }) => [
      {
        label: '编辑',
        auth: {
          perm: 'system:dept:update',
          effect: 'disable',
        },
        ifShow: (() => {
          return record.name !== '系统管理部门';
        })(),
        onClick: () => openMenuModal(record),
      },
      {
        label: '删除',
        auth: 'system:dept:delete',
        ifShow: (() => {
          return record.name !== '系统管理部门';
        })(),
        popConfirm: {
          title: '你确定要删除吗？',
          placement: 'left',
          onConfirm: () => delRowConfirm(record),
        },
      },
    ],
  },
];
</script>
